<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>共享明细字段的标准报价系统</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 顶部导航 */
        .header {
            background-color: #165DFF;
            color: white;
            padding: 15px;
            position: relative;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
        }
        
        .header-actions {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            color: white;
            background: none;
            border: none;
            font-size: 1rem;
            cursor: pointer;
            padding: 5px 10px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 主容器 */
        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 15px;
        }
        
        /* 产品信息卡片 */
        .product-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .product-header {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .product-image {
            width: 80px;
            height: 80px;
            background-color: #e8f0ff;
            border-radius: 8px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #165DFF;
            font-weight: bold;
        }
        
        .product-info h2 {
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #333;
        }
        
        .product-meta {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 3px;
        }
        
        /* 业务关联信息 */
        .business-info {
            background-color: #f9fbff;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .business-info h3 {
            font-size: 0.95rem;
            color: #165DFF;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .business-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        
        .business-field {
            background-color: white;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #e0e8ff;
        }
        
        .business-field label {
            display: block;
            font-size: 0.75rem;
            color: #666;
            margin-bottom: 2px;
        }
        
        .business-field input {
            width: 100%;
            border: none;
            font-size: 0.9rem;
            color: #333;
            padding: 2px 0;
        }
        
        .business-field input:focus {
            outline: none;
            color: #165DFF;
        }
        
        /* 共享明细管理 */
        .shared-features {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .shared-features h3 {
            font-size: 1rem;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .feature-item:last-child {
            border-bottom: none;
        }
        
        .feature-name {
            flex: 2;
            font-size: 0.95rem;
        }
        
        .feature-default {
            flex: 1;
            font-size: 0.9rem;
            color: #666;
        }
        
        .feature-default input {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px 8px;
            font-size: 0.9rem;
        }
        
        .feature-actions {
            width: 60px;
            text-align: center;
        }
        
        .remove-feature-btn {
            background: none;
            border: none;
            color: #ff5630;
            cursor: pointer;
            font-size: 1rem;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .add-feature-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: #165DFF;
            background: none;
            border: 1px dashed #165DFF;
            width: 100%;
            padding: 8px 0;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 10px;
        }
        
        /* 套餐选择区域 */
        .packages-section {
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 1rem;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title .add-btn {
            font-size: 0.85rem;
            color: #165DFF;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        
        .package-list {
            margin-bottom: 15px;
        }
        
        /* 套餐卡片 */
        .package-card {
            background-color: white;
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        
        .package-header {
            padding: 12px 15px;
            background-color: #f5f8ff;
            border-bottom: 1px solid #e8f0ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .package-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            flex: 1;
        }
        
        .package-title input {
            width: 100%;
            border: 1px solid transparent;
            background: transparent;
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            padding: 3px 5px;
            border-radius: 4px;
        }
        
        .package-title input:focus {
            outline: none;
            border-color: #165DFF;
            background-color: white;
        }
        
        .package-price {
            font-size: 1rem;
            font-weight: 700;
            color: #165DFF;
            margin: 0 10px;
            min-width: 100px;
            text-align: right;
        }
        
        .package-price input {
            width: 100px;
            border: 1px solid transparent;
            background: transparent;
            font-size: 1rem;
            font-weight: 700;
            color: #165DFF;
            padding: 3px 5px;
            border-radius: 4px;
            text-align: right;
        }
        
        .package-price input:focus {
            outline: none;
            border-color: #165DFF;
            background-color: white;
        }
        
        .package-actions {
            display: flex;
            gap: 8px;
        }
        
        .package-action-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 0.9rem;
            padding: 3px 5px;
            border-radius: 4px;
        }
        
        .package-action-btn:hover {
            background-color: rgba(0,0,0,0.05);
        }
        
        .package-action-btn.delete {
            color: #ff5630;
        }
        
        .package-action-btn.toggle {
            color: #666;
        }
        
        /* 套餐明细差异 */
        .package-details {
            padding: 15px;
            border-top: 1px solid #f0f0f0;
        }
        
        .package-items {
            margin-bottom: 15px;
            border: 1px solid #f0f0f0;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .items-header {
            display: flex;
            background-color: #f9f9f9;
            padding: 8px 12px;
            font-size: 0.85rem;
            color: #666;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .header-name {
            flex: 2;
        }
        
        .header-default {
            flex: 1;
            text-align: center;
            color: #999;
            font-style: italic;
        }
        
        .header-value {
            flex: 1;
            text-align: center;
        }
        
        .header-actions {
            width: 60px;
            text-align: center;
        }
        
        .package-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.9rem;
        }
        
        .package-item:last-child {
            border-bottom: none;
        }
        
        .item-name {
            flex: 2;
            padding-right: 10px;
        }
        
        .item-default {
            flex: 1;
            text-align: center;
            font-size: 0.85rem;
            color: #999;
        }
        
        .item-value {
            flex: 1;
            text-align: center;
        }
        
        .item-value input {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px 8px;
            font-size: 0.9rem;
            text-align: center;
        }
        
        .item-value input:focus {
            outline: none;
            border-color: #165DFF;
        }
        
        .item-value input.different {
            border-color: #165DFF;
            font-weight: 500;
        }
        
        .item-actions {
            width: 60px;
            text-align: center;
        }
        
        .use-default-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 0.8rem;
            color: #999;
        }
        
        .use-default-btn:hover {
            color: #165DFF;
        }
        
        .package-description {
            margin-top: 15px;
        }
        
        .package-description textarea {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 10px;
            font-size: 0.9rem;
            min-height: 80px;
            resize: vertical;
            line-height: 1.5;
        }
        
        .package-description textarea:focus {
            outline: none;
            border-color: #165DFF;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 0;
            background-color: #165DFF;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            text-align: center;
            width: 100%;
        }
        
        .btn:hover {
            background-color: #0E4CD1;
        }
        
        .btn-secondary {
            background-color: white;
            color: #165DFF;
            border: 1px solid #165DFF;
        }
        
        .btn-secondary:hover {
            background-color: #f0f5ff;
        }
        
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 12px 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            gap: 10px;
        }
        
        .bottom-actions .btn {
            flex: 1;
        }
        
        /* 提示信息 */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 15px;
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;
            z-index: 1001;
            display: none;
        }
        
        .toast.show {
            display: block;
            animation: fadeInUp 0.3s, fadeOut 0.3s 2.7s;
        }
        
        .toast.success {
            background-color: rgba(54, 179, 126, 0.9);
        }
        
        .toast.error {
            background-color: rgba(255, 86, 48, 0.9);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate(-50%, 20px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }
        
        /* 加载状态 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 确认对话框 */
        .confirm-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            display: none;
        }
        
        .confirm-modal.show {
            display: flex;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 10px;
            width: 90%;
            max-width: 300px;
            padding: 20px;
        }
        
        .modal-content h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            text-align: center;
            color: #333;
        }
        
        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        .modal-buttons button {
            flex: 1;
            padding: 8px 0;
            border-radius: 6px;
            font-size: 0.95rem;
            cursor: pointer;
        }

        /* 预览模态框样式 */
        .preview-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.7);
            z-index: 2000;
            display: none;
            overflow-y: auto;
            padding: 20px 0;
        }
        
        .preview-modal.show {
            display: block;
        }
        
        .preview-content {
            background-color: white;
            border-radius: 10px;
            width: 95%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        
        .close-preview {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #f5f5f5;
        }
        
        .preview-header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .preview-title {
            font-size: 1.5rem;
            color: #165DFF;
            margin-bottom: 10px;
        }
        
        .preview-subtitle {
            color: #666;
            font-size: 0.9rem;
        }
        
        /* 横向比对表格样式 */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            min-width: 600px;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .comparison-table th {
            background-color: #f5f8ff;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .comparison-table tr:last-child td {
            border-bottom: none;
        }
        
        .comparison-table tr:hover {
            background-color: #f9f9f9;
        }
        
        .feature-column {
            width: 30%;
            font-weight: 500;
            background-color: #f9f9f9;
            position: sticky;
            left: 0;
            z-index: 5;
        }
        
        .package-column {
            width: calc(70% / var(--package-count, 3));
        }
        
        .package-header {
            color: #165DFF;
            text-align: center;
            font-size: 1.1rem;
        }
        
        .price-cell {
            font-weight: 700;
            color: #165DFF;
            text-align: center;
        }
        
        .different-value {
            color: #165DFF;
            font-weight: 500;
        }
        
        .package-description-cell {
            padding-top: 15px;
            font-size: 0.9rem;
            color: #555;
            border-top: 2px solid #f0f0f0;
        }
        
        /* 滚动容器 */
        .table-scroll-container {
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        
        .preview-footer {
            text-align: center;
            color: #666;
            font-size: 0.9rem;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <h1>产品标准报价</h1>
        <div class="header-actions">
            <button class="action-btn" id="save-all-btn">
                <span>保存</span>
            </button>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container">
        <!-- 产品信息 -->
        <div class="product-card">
            <div class="product-header">
                <div class="product-image">产品图</div>
                <div class="product-info">
                    <h2>智能办公系统 V3.0</h2>
                    <div class="product-meta">产品ID: PROD-2023-0589</div>
                    <div class="product-meta">版本: 企业级</div>
                </div>
            </div>
            <p>新一代智能办公解决方案，集成考勤、审批、协作等功能，提升企业办公效率。</p>
        </div>
        
        <!-- 业务关联信息 -->
        <div class="business-info">
            <h3>业务关联信息</h3>
            <div class="business-fields">
                <div class="business-field">
                    <label for="mei_id">项目ID (mei_id)</label>
                    <input type="number" id="mei_id" placeholder="输入项目ID">
                </div>
                <div class="business-field">
                    <label for="store_id">门店ID (store_id)</label>
                    <input type="number" id="store_id" placeholder="输入门店ID">
                </div>
                <div class="business-field">
                    <label for="staff_id">员工ID (staff_id)</label>
                    <input type="number" id="staff_id" placeholder="输入员工ID">
                </div>
                <div class="business-field">
                    <label for="cyber_id">业务线ID (cyber_id)</label>
                    <input type="number" id="cyber_id" placeholder="输入业务线ID">
                </div>
            </div>
        </div>
        
        <!-- 共享明细管理 -->
        <div class="shared-features">
            <h3>
                <span>共享明细项管理</span>
                <button class="add-btn" id="add-feature-btn">
                    <span>+</span>
                    <span>添加明细</span>
                </button>
            </h3>
            <div id="features-list">
                <!-- 共享明细项将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <!-- 套餐列表 -->
        <div class="packages-section">
            <div class="section-title">
                <span>标准套餐报价</span>
                <button class="add-btn" id="add-package-btn">
                    <span>+</span>
                    <span>添加套餐</span>
                </button>
            </div>
            
            <div class="package-list" id="package-list">
                <!-- 套餐内容将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <!-- 底部留出空间 -->
        <div style="height: 80px;"></div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="bottom-actions">
        <button class="btn btn-secondary" id="preview-btn">预览报价单</button>
        <button class="btn" id="export-btn">导出报价</button>
    </div>
    
    <!-- 确认删除对话框 -->
    <div class="confirm-modal" id="confirm-modal">
        <div class="modal-content">
            <h3>确定要删除吗？</h3>
            <div class="modal-buttons">
                <button class="btn-secondary" id="cancel-delete">取消</button>
                <button class="btn" id="confirm-delete">删除</button>
            </div>
        </div>
    </div>
    
    <!-- 预览对话框 -->
    <div class="preview-modal" id="preview-modal">
        <div class="preview-content">
            <button class="close-preview" id="close-preview">&times;</button>
            
            <div class="preview-header">
                <h2 class="preview-title">智能办公系统 V3.0 - 套餐报价对比</h2>
                <div class="preview-subtitle">更新时间: <span id="preview-update-time"></span></div>
            </div>
            
            <div class="table-scroll-container">
                <table class="comparison-table" id="comparison-table">
                    <!-- 表格内容将通过JavaScript动态生成 -->
                </table>
            </div>
            
            <div class="preview-footer">
                <p>业务关联信息: 项目ID: <span id="preview-mei-id">-</span> | 门店ID: <span id="preview-store-id">-</span> | 员工ID: <span id="preview-staff-id">-</span></p>
            </div>
        </div>
    </div>
    
    <!-- 提示框 -->
    <div class="toast" id="toast"></div>

    <script>
        // 共享的明细项列表
        let features = [
            { id: 1, name: "核心办公模块", defaultValue: "1套" },
            { id: 2, name: "用户授权", defaultValue: "50用户" },
            { id: 3, name: "云存储", defaultValue: "50GB" },
            { id: 4, name: "技术支持", defaultValue: "3个月" },
            { id: 5, name: "移动端应用", defaultValue: "不包含" }
        ];
        
        // 套餐数据 - 只存储与默认值不同的差异
        let packages = [
            {
                id: 1,
                name: "基础版套餐",
                price: 3800.00,
                // 基础版使用所有默认值，所以差异为空
                differences: {},
                description: "适合小型团队使用，包含基础办公功能和有限的用户授权，提供3个月技术支持服务。"
            },
            {
                id: 2,
                name: "标准版套餐",
                price: 8600.00,
                // 标准版只记录与默认值不同的项
                differences: {
                    2: "200用户",   // 用户授权
                    3: "200GB",    // 云存储
                    4: "12个月",   // 技术支持
                    5: "包含"      // 移动端应用
                },
                description: "适合中小型企业，包含完整功能和扩展用户授权，提供1年技术支持和移动端应用访问。"
            },
            {
                id: 3,
                name: "企业版套餐",
                price: 19800.00,
                // 企业版只记录与默认值不同的项
                differences: {
                    2: "500用户",   // 用户授权
                    3: "1TB",      // 云存储
                    4: "36个月",   // 技术支持
                    5: "包含"      // 移动端应用
                },
                description: "适合中大型企业，包含全部功能和高级支持服务，提供3年技术支持。"
            }
        ];
        
        // 当前要删除的项ID和类型
        let itemToDelete = { id: null, type: null };
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 渲染共享明细项
            renderFeatures();
            
            // 渲染套餐列表
            renderPackages();
            
            // 添加明细项按钮
            document.getElementById('add-feature-btn').addEventListener('click', addNewFeature);
            
            // 添加套餐按钮
            document.getElementById('add-package-btn').addEventListener('click', addNewPackage);
            
            // 保存所有按钮
            document.getElementById('save-all-btn').addEventListener('click', saveAllData);
            
            // 预览和导出按钮
            document.getElementById('preview-btn').addEventListener('click', showPreview);
            document.getElementById('export-btn').addEventListener('click', () => showToast('报价已导出', 'success'));
            
            // 关闭预览按钮
            document.getElementById('close-preview').addEventListener('click', () => {
                document.getElementById('preview-modal').classList.remove('show');
            });
            
            // 确认删除相关事件
            document.getElementById('cancel-delete').addEventListener('click', () => {
                document.getElementById('confirm-modal').classList.remove('show');
                itemToDelete = { id: null, type: null };
            });
            
            document.getElementById('confirm-delete').addEventListener('click', () => {
                if (itemToDelete.id !== null && itemToDelete.type) {
                    if (itemToDelete.type === 'feature') {
                        deleteFeature(itemToDelete.id);
                    } else if (itemToDelete.type === 'package') {
                        deletePackage(itemToDelete.id);
                    }
                    document.getElementById('confirm-modal').classList.remove('show');
                    itemToDelete = { id: null, type: null };
                }
            });
        });
        
        // 渲染共享明细项
        function renderFeatures() {
            const featuresList = document.getElementById('features-list');
            featuresList.innerHTML = '';
            
            if (features.length === 0) {
                featuresList.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">暂无明细项，请添加</div>';
                return;
            }
            
            features.forEach(feature => {
                const featureItem = document.createElement('div');
                featureItem.className = 'feature-item';
                featureItem.dataset.id = feature.id;
                
                featureItem.innerHTML = `
                    <div class="feature-name">${feature.name}</div>
                    <div class="feature-default">
                        <input type="text" value="${feature.defaultValue}" onchange="updateFeatureDefault(${feature.id}, this.value)">
                    </div>
                    <div class="feature-actions">
                        <button class="remove-feature-btn" onclick="showDeleteConfirm(${feature.id}, 'feature')">&times;</button>
                    </div>
                `;
                
                featuresList.appendChild(featureItem);
            });
            
            // 当明细项变化时，更新所有套餐的显示
            renderPackages();
        }
        
        // 渲染套餐列表
        function renderPackages() {
            const packageList = document.getElementById('package-list');
            packageList.innerHTML = '';
            
            if (packages.length === 0) {
                packageList.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">暂无套餐，请添加套餐</div>';
                return;
            }
            
            packages.forEach(pkg => {
                // 创建套餐卡片
                const packageCard = document.createElement('div');
                packageCard.className = 'package-card';
                packageCard.dataset.id = pkg.id;
                
                // 套餐标题栏
                const header = document.createElement('div');
                header.className = 'package-header';
                
                // 套餐名称（可编辑）
                const titleDiv = document.createElement('div');
                titleDiv.className = 'package-title';
                titleDiv.innerHTML = `<input type="text" value="${pkg.name}" onchange="updatePackageName(${pkg.id}, this.value)">`;
                
                // 套餐价格（可编辑）
                const priceDiv = document.createElement('div');
                priceDiv.className = 'package-price';
                priceDiv.innerHTML = `<input type="number" step="0.01" min="0" value="${pkg.price}" onchange="updatePackagePrice(${pkg.id}, this.value)">`;
                
                // 套餐操作按钮
                const actionsDiv = document.createElement('div');
                actionsDiv.className = 'package-actions';
                actionsDiv.innerHTML = `
                    <button class="package-action-btn toggle" onclick="togglePackageDetails(${pkg.id})">
                        <span id="toggle-icon-${pkg.id}">▼</span>
                    </button>
                    <button class="package-action-btn delete" onclick="showDeleteConfirm(${pkg.id}, 'package')">删除</button>
                `;
                
                // 组装标题栏
                header.appendChild(titleDiv);
                header.appendChild(priceDiv);
                header.appendChild(actionsDiv);
                
                // 套餐明细差异区域
                const detailsDiv = document.createElement('div');
                detailsDiv.className = 'package-details';
                detailsDiv.id = `package-details-${pkg.id}`;
                detailsDiv.style.display = 'none'; // 默认隐藏
                
                // 明细项列表
                let itemsHtml = `
                    <div class="package-items">
                        <div class="items-header">
                            <div class="header-name">项目名称</div>
                            <div class="header-default">默认值</div>
                            <div class="header-value">套餐值</div>
                            <div class="header-actions">操作</div>
                        </div>
                `;
                
                // 明细项（只显示差异或使用默认值）
                features.forEach(feature => {
                    // 检查是否有差异值，否则使用默认值
                    const hasDifference = pkg.differences && pkg.differences[feature.id] !== undefined;
                    const value = hasDifference ? pkg.differences[feature.id] : feature.defaultValue;
                    
                    itemsHtml += `
                        <div class="package-item">
                            <div class="item-name">${feature.name}</div>
                            <div class="item-default">${feature.defaultValue}</div>
                            <div class="item-value">
                                <input type="text" 
                                       value="${value}" 
                                       class="${hasDifference ? 'different' : ''}"
                                       onchange="updatePackageFeature(${pkg.id}, ${feature.id}, this.value)">
                            </div>
                            <div class="item-actions">
                                ${hasDifference ? 
                                    `<button class="use-default-btn" onclick="useDefaultValue(${pkg.id}, ${feature.id})">默认</button>` : ''}
                            </div>
                        </div>
                    `;
                });
                
                itemsHtml += '</div>'; // 关闭package-items
                
                // 套餐说明（可编辑）
                itemsHtml += `
                    <div class="package-description">
                        <textarea onchange="updatePackageDescription(${pkg.id}, this.value)" placeholder="请输入套餐说明...">${pkg.description || ''}</textarea>
                    </div>
                `;
                
                detailsDiv.innerHTML = itemsHtml;
                
                // 组装套餐卡片
                packageCard.appendChild(header);
                packageCard.appendChild(detailsDiv);
                
                // 添加到列表
                packageList.appendChild(packageCard);
            });
        }
        
        // 切换套餐明细显示/隐藏
        function togglePackageDetails(packageId) {
            const detailsElement = document.getElementById(`package-details-${packageId}`);
            const iconElement = document.getElementById(`toggle-icon-${packageId}`);
            
            if (detailsElement.style.display === 'none' || detailsElement.style.display === '') {
                detailsElement.style.display = 'block';
                iconElement.textContent = '▲';
            } else {
                detailsElement.style.display = 'none';
                iconElement.textContent = '▼';
            }
        }
        
        // 添加新明细项
        function addNewFeature() {
            const newId = features.length > 0 ? Math.max(...features.map(f => f.id)) + 1 : 1;
            const newFeature = {
                id: newId,
                name: "新明细项",
                defaultValue: "1个"
            };
            
            features.push(newFeature);
            renderFeatures();
            
            // 聚焦到新明细项的名称
            const featureElement = document.querySelector(`.feature-item[data-id="${newId}"] .feature-name`);
            if (featureElement) {
                // 创建临时输入框以便修改名称
                const originalContent = featureElement.textContent;
                featureElement.innerHTML = `<input type="text" value="${originalContent}" 
                    onblur="updateFeatureName(${newId}, this.value)">`;
                const input = featureElement.querySelector('input');
                input.focus();
            }
            
            showToast('新明细项已添加', 'success');
        }
        
        // 更新明细项名称
        function updateFeatureName(featureId, newName) {
            const feature = features.find(f => f.id === featureId);
            if (feature && newName.trim() !== '') {
                feature.name = newName.trim();
                renderFeatures();
            } else {
                renderFeatures(); // 恢复原始显示
            }
        }
        
        // 更新明细项默认值
        function updateFeatureDefault(featureId, newValue) {
            const feature = features.find(f => f.id === featureId);
            if (feature && newValue.trim() !== '') {
                feature.defaultValue = newValue.trim();
                showToast('默认值已更新', 'success');
            } else {
                renderFeatures(); // 恢复原始值
            }
        }
        
        // 添加新套餐
        function addNewPackage() {
            const newId = packages.length > 0 ? Math.max(...packages.map(p => p.id)) + 1 : 1;
            const newPackage = {
                id: newId,
                name: "新套餐",
                price: 0.00,
                differences: {}, // 新套餐默认使用所有默认值，无差异
                description: ""
            };
            
            packages.push(newPackage);
            renderPackages();
            
            // 自动展开新套餐的明细
            setTimeout(() => {
                togglePackageDetails(newId);
                // 聚焦到套餐名称输入框
                const nameInput = document.querySelector(`.package-card[data-id="${newId}"] .package-title input`);
                if (nameInput) {
                    nameInput.focus();
                }
            }, 100);
            
            showToast('新套餐已创建', 'success');
        }
        
        // 显示删除确认
        function showDeleteConfirm(itemId, itemType) {
            itemToDelete = { id: itemId, type: itemType };
            const modalTitle = document.querySelector('.modal-content h3');
            
            if (itemType === 'feature') {
                modalTitle.textContent = '确定要删除这个明细项吗？';
            } else if (itemType === 'package') {
                modalTitle.textContent = '确定要删除这个套餐吗？';
            }
            
            document.getElementById('confirm-modal').classList.add('show');
        }
        
        // 删除明细项
        function deleteFeature(featureId) {
            const initialLength = features.length;
            features = features.filter(f => f.id !== featureId);
            
            // 同时从所有套餐的差异中移除该明细项
            packages.forEach(pkg => {
                if (pkg.differences && pkg.differences[featureId] !== undefined) {
                    delete pkg.differences[featureId];
                }
            });
            
            if (features.length < initialLength) {
                renderFeatures();
                showToast('明细项已删除', 'success');
            }
        }
        
        // 删除套餐
        function deletePackage(packageId) {
            const initialLength = packages.length;
            packages = packages.filter(p => p.id !== packageId);
            
            if (packages.length < initialLength) {
                renderPackages();
                showToast('套餐已删除', 'success');
            }
        }
        
        // 更新套餐名称
        function updatePackageName(packageId, newName) {
            const pkg = packages.find(p => p.id === packageId);
            if (pkg && newName.trim() !== '') {
                pkg.name = newName.trim();
                showToast('套餐名称已更新', 'success');
            }
        }
        
        // 更新套餐价格
        function updatePackagePrice(packageId, newPrice) {
            const pkg = packages.find(p => p.id === packageId);
            const price = parseFloat(newPrice);
            
            if (pkg && !isNaN(price) && price >= 0) {
                pkg.price = price;
                showToast('套餐价格已更新', 'success');
            } else {
                showToast('请输入有效的价格', 'error');
                renderPackages(); // 恢复原始价格
            }
        }
        
        // 更新套餐明细项的值（记录差异）
        function updatePackageFeature(packageId, featureId, newValue) {
            const pkg = packages.find(p => p.id === packageId);
            const feature = features.find(f => f.id === featureId);
            
            if (pkg && feature) {
                // 初始化差异对象
                if (!pkg.differences) {
                    pkg.differences = {};
                }
                
                // 如果值与默认值不同，则记录差异；否则移除差异
                if (newValue.trim() !== feature.defaultValue) {
                    pkg.differences[featureId] = newValue.trim();
                } else {
                    delete pkg.differences[featureId];
                }
                
                // 更新显示以反映差异状态
                renderPackages();
                togglePackageDetails(packageId); // 保持展开状态
            }
        }
        
        // 使用默认值（移除差异）
        function useDefaultValue(packageId, featureId) {
            const pkg = packages.find(p => p.id === packageId);
            const feature = features.find(f => f.id === featureId);
            
            if (pkg && feature && pkg.differences && pkg.differences[featureId] !== undefined) {
                delete pkg.differences[featureId];
                renderPackages();
                togglePackageDetails(packageId); // 保持展开状态
                showToast('已使用默认值', 'success');
            }
        }
        
        // 更新套餐说明
        function updatePackageDescription(packageId, newDescription) {
            const pkg = packages.find(p => p.id === packageId);
            if (pkg) {
                pkg.description = newDescription.trim();
                showToast('套餐说明已更新', 'success');
            }
        }
        
        // 保存所有数据
        function saveAllData() {
            // 获取业务关联信息
            const businessData = {
                mei_id: document.getElementById('mei_id').value,
                store_id: document.getElementById('store_id').value,
                staff_id: document.getElementById('staff_id').value,
                cyber_id: document.getElementById('cyber_id').value
            };
            
            // 构建完整数据对象
            const allData = {
                product: {
                    name: "智能办公系统 V3.0",
                    id: "PROD-2023-0589",
                    version: "企业级"
                },
                business: businessData,
                features: features,       // 共享的明细项
                packages: packages,       // 套餐数据（只包含差异）
                updatedAt: new Date().toLocaleString()
            };
            
            // 模拟保存操作
            const saveButton = document.getElementById('save-all-btn');
            const originalContent = saveButton.innerHTML;
            saveButton.innerHTML = '<div class="loading"></div>';
            saveButton.disabled = true;
            
            setTimeout(() => {
                // 在实际应用中，这里会将数据发送到后端保存
                console.log('保存所有数据:', allData);
                
                // 恢复按钮状态
                saveButton.innerHTML = originalContent;
                saveButton.disabled = false;
                
                showToast('所有数据已保存', 'success');
            }, 1000);
            
            return allData;
        }
        
        // 显示预览
        function showPreview() {
            // 获取最新的保存数据
            const allData = saveAllData();
            
            if (allData.packages.length === 0) {
                showToast('请先添加套餐', 'error');
                return;
            }
            
            // 更新预览时间
            document.getElementById('preview-update-time').textContent = allData.updatedAt;
            
            // 更新业务关联信息
            document.getElementById('preview-mei-id').textContent = allData.business.mei_id || '-';
            document.getElementById('preview-store-id').textContent = allData.business.store_id || '-';
            document.getElementById('preview-staff-id').textContent = allData.business.staff_id || '-';
            
            // 生成横向比对表格
            const table = document.getElementById('comparison-table');
            table.innerHTML = '';
            
            // 设置CSS变量，用于计算列宽
            table.style.setProperty('--package-count', allData.packages.length);
            
            // 创建表头行
            const headerRow = document.createElement('tr');
            
            // 第一列是明细项名称
            const headerFeatureCell = document.createElement('th');
            headerFeatureCell.className = 'feature-column';
            headerFeatureCell.textContent = '明细项目';
            headerRow.appendChild(headerFeatureCell);
            
            // 为每个套餐创建表头
            allData.packages.forEach(pkg => {
                const headerCell = document.createElement('th');
                headerCell.className = 'package-column package-header';
                headerCell.textContent = pkg.name;
                headerRow.appendChild(headerCell);
            });
            
            table.appendChild(headerRow);
            
            // 添加价格行
            const priceRow = document.createElement('tr');
            
            const priceLabelCell = document.createElement('td');
            priceLabelCell.className = 'feature-column';
            priceLabelCell.textContent = '套餐价格';
            priceRow.appendChild(priceLabelCell);
            
            allData.packages.forEach(pkg => {
                const priceCell = document.createElement('td');
                priceCell.className = 'price-cell';
                priceCell.textContent = `¥${pkg.price.toFixed(2)}`;
                priceRow.appendChild(priceCell);
            });
            
            table.appendChild(priceRow);
            
            // 添加明细项行
            allData.features.forEach(feature => {
                const row = document.createElement('tr');
                
                // 明细项名称
                const featureCell = document.createElement('td');
                featureCell.className = 'feature-column';
                featureCell.textContent = feature.name;
                row.appendChild(featureCell);
                
                // 每个套餐的值
                allData.packages.forEach(pkg => {
                    const valueCell = document.createElement('td');
                    
                    // 检查是否有差异值，否则使用默认值
                    const hasDifference = pkg.differences && pkg.differences[feature.id] !== undefined;
                    const value = hasDifference ? pkg.differences[feature.id] : feature.defaultValue;
                    
                    valueCell.textContent = value;
                    if (hasDifference) {
                        valueCell.classList.add('different-value');
                    }
                    
                    row.appendChild(valueCell);
                });
                
                table.appendChild(row);
            });
            
            // 添加套餐说明行
            const descriptionRow = document.createElement('tr');
            
            const descriptionLabelCell = document.createElement('td');
            descriptionLabelCell.className = 'feature-column';
            descriptionLabelCell.textContent = '套餐说明';
            descriptionRow.appendChild(descriptionLabelCell);
            
            allData.packages.forEach(pkg => {
                const descriptionCell = document.createElement('td');
                descriptionCell.className = 'package-description-cell';
                descriptionCell.textContent = pkg.description || '无';
                descriptionRow.appendChild(descriptionCell);
            });
            
            table.appendChild(descriptionRow);
            
            // 显示预览模态框
            document.getElementById('preview-modal').classList.add('show');
        }
        
        // 显示提示信息
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.className = 'toast';
            toast.classList.add(type, 'show');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html>
